<template>
    <el-row class="container-box" >
        <el-col class="title">
            <el-row>已发起的投票记录</el-row>
            <el-row v-if=" data.VoteHistory && !data.VoteHistory.length > 0" style="margin:5vh 0px 0px 2vw;color:#999;">暂无投票记录数据</el-row>
        </el-col>
        <el-col class="item-box" v-for="(item,index) in data.VoteHistory" :key="index">
            <el-row class="item" @click="showIconItem(index)">
                <el-col :span="11" class="item-left">
                    <span class="flag-text hidden-sm-and-down">标题: &nbsp;&nbsp;</span>
                    <span>{{item.title}}</span>
                </el-col>
                <el-col :span="12" class="item-right">
                    <span class="flag-text hidden-sm-and-down">创建时间: &nbsp;&nbsp;</span>
                    <span v-if="item.create_time">{{item.create_time.split(' ')[0]}}</span>
                </el-col>
            </el-row>
            <el-row class="item-icon-box" v-show="item.flag" >
                <el-col @click="edit(item.id,item.type)" :span="5" class="item-icon" >
                    <span><img class="img" src="../../assets/home/edit.png" alt=""></span>
                    <span>编辑</span>
                </el-col>
                <el-col @click="look(item.id)" :span="5" :offset=1 class="item-icon">
                    <span><img class="img" src="../../assets/home/chakan.png" alt=""></span>
                    <span>查看</span>
                </el-col>

                <el-popover
                    placement="bottom"
                    title="分享链接即可"
                    :width="200"
                    trigger="click"
                    :content="link"
                >
                    <template #reference>
                        <el-col @click="share(item.id)" :span="5" :offset=1 class="item-icon">
                            <span><img class="img" src="../../assets/home/fenxiang1.png" alt=""></span>
                            <span>分享</span>
                        </el-col>
                    </template>
                </el-popover>

                <el-col :span="5" @click="del(item.id)" :offset=1 class="item-icon">
                    <span><img class="img" src="../../assets/home/shanchu1.png" alt=""></span>
                    <span>删除</span>
                </el-col>
            </el-row>
        </el-col>
    </el-row>
</template>

<script type="text/ecmascript-6">
import { defineComponent,ref, reactive,computed } from "vue";
import { useRouter } from "vue-router";
import { apiGetVoteAll,apiDeleteVote } from '../../api/index'
import { ElMessage } from 'element-plus'

export default defineComponent({
    name: "VoteHistory",
    setup() {
        const data = reactive({
            VoteHistory:null
        })

        const router = useRouter()
        const user_id = JSON.parse(window.sessionStorage.getItem('info')).id
        

        getVoteAll(user_id)
        //获取用户历史投票记录
        async function getVoteAll(user_id){
            const result = await apiGetVoteAll(user_id)
            if ( result.err_code == 200 ){
                console.log(result.data)
                data.VoteHistory = result.data.reverse()
                // console.log(data.VoteHistory)
                return
            }
            ElMessage.error(result.message);
        }
        
        //显示四个icon
        function showIconItem(currentIndex){
            //将当前是icon显示，其余隐藏
            data.VoteHistory = data.VoteHistory.map((item,index)=>{
                item.flag = false
                index == currentIndex ? item.flag = true : null
                return item
            })
        }
        
        //删除投票项
        async function del(vote_id){
            console.log(vote_id)
            const result = await apiDeleteVote(vote_id,user_id)
            if ( result.err_code == 200 ){
                ElMessage.success({
                    message: '删除成功',
                    type: 'success'
                });
                getVoteAll(user_id)
                return
            }
             ElMessage.error(result.message);
        }

        //跳转投票
        function edit(vote_id,type){
            //保存投票id
            window.sessionStorage.setItem('voteId',vote_id)
            router.push(`/VoteEdit/${type}`)

        }

        //查看投票详情
        function look(id){
            window.sessionStorage.setItem('v',id)
            router.push(`/VoteDetail/${id}`)
        }

        let link = ref('')
        function share(id){
            console.log(id)
            link.value = `${window.location.origin}/VoteDetail/${id}`
        }

        const getVoteHistoryLen = computed(()=>{
            return data.VoteHistory && data.VoteHistory.length
        })
        console.log(getVoteHistoryLen)
        return {
            data,
            showIconItem,
            getVoteHistoryLen,
            del,
            edit,
            look,
            share,
            link
        };
    },

});
</script>

<style scoped lang="less" >
@color:#0B9CE9;
.container-box::-webkit-scrollbar{
    display: none;
}
// .container-box .item-box:last-child{
//     margin-bottom: 20px;
// }
// .containerHeight{
//     height: 70vh;
// }
.container-box{
    // margin-bottom: 5vh;
    // height: 70vh;
    .title{
        padding: 10px 0px;
        width: 100%;
        border: 1px dashed #eee;
        border-left: none;
        border-right: none;
        // background: #eee;
        font-size: 16px;
        font-weight: 600;
    }
    .item-box{
        // margin-bottom: 10px;
        // line-height: 40px;
        width: 100%;
        color: #999;
        .item{
            cursor: pointer;
            margin-bottom: 10px;
            line-height: 40px;
            width: 100%;
            border-bottom: 1px solid #eee;
            .flag-text{
                font-weight: bold;
                color: @color;
            }
            .item-left{
                padding-left: 1vw;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
            }
            .item-right{
                padding-right: 1vw;
                text-align: right;
            }
        }
        // 显示四个图标
        .item-icon-box{
            padding-bottom: 2px;
            // line-height: 16px;
            border-bottom: 1px solid #eee;
            width: 100%;
            font-size: 12px;
            text-align: center;
            .item-icon{
            cursor: pointer;

                display: flex;
                width: 100%;
                flex-direction: column;
                .img{
                    width: 20px;
                    height: 20px;
                }
            }
        }
    }
}




</style>
